# Component: Content Module

Global container for polymorphic content injection

Root Block

### BEM Anatomy

| Type      | Class Name             | Description                                                                                                                                                         |
| --------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-module`           | The universal wrapper. Defines base vertical rhythm and anchor offsets.                                                                                             |
| Modifier  | `--[type]`             | _(e.g., --text, --video, --form, --shopcart)_. Applied to the Block to switch internal layouts, typography, and background logic based on the module's data source. |
| Element   | `__content`            | The primary inner container. Often acts as a Bootstrap `.container` or a restricted-width wrapper for readability.                                                  |
| Modifier  | `__content--floating`  | Breaks the standard flow to overlay content on backgrounds or images; often uses absolute positioning or negative margins.                                          |
| Element   | `__body`               | The core text or data area of the module. Handles the rendering of the Rich Text Editor (RTE) output or component logic.                                            |
| Element   | `__card`               | Standardized card element. Forced to `height: 100%` for grid alignment.                                                                                             |
| Element   | `__card-image`         | The visual header of a card; maintains aspect ratio and handles background-cover logic.                                                                             |
| Element   | `__card-body`          | Padding-heavy container for text within a card, situated between the image and footer.                                                                              |
| Element   | `__card-footer`        | Sticky bottom area of a card for actions (links/buttons) or timestamps.                                                                                             |
| Element   | `__toolbar`            | Action area usually appearing at the top of a list or index module.                                                                                                 |
| Element   | `__file-infos`         | Shared data layout for file-based modules (Downloads/Contents).                                                                                                     |
| Element   | `__file-name`          | The primary label for a file; usually includes an icon based on the file extension.                                                                                 |
| Element   | `__header`             | Module-level heading area. Manages the relationship between the Main Title and optional Subtitles.                                                                  |
| Element   | `__anniversary-slider` | Specific structural element for time-based or milestone displays within a module.                                                                                   |
| Element   | `__button`             | Base class for standalone triggers or CTA links within the module scope.                                                                                            |
| Element   | `__box`                | A generic container used for highlighted sections or "callout" areas within the module body.                                                                        |
| Element   | `__item`               | The repeating unit in list-based modules (e.g., a single news snippet or download link).                                                                            |
| Modifier  | `__item--list-item`    | Forces the item to behave like a standard bulleted or numbered row.                                                                                                 |
| Element   | `__list`               | The parent container for repeating `__item` elements.                                                                                                               |
| Modifier  | `__list--default`      | Standard vertical stack with basic margins.                                                                                                                         |
| Modifier  | `__list--box`          | Items are wrapped in borders/backgrounds to appear as separate tiles.                                                                                               |
| Modifier  | `__list--buttons`      | Transforms the list into a flex-group of actionable button links.                                                                                                   |
| Modifier  | `__list--list`         | Explicitly styles the list as a traditional text-based list (dots/numbers).                                                                                         |


### Type-Specific Overrides

The SCSS utilizes nested modifiers to alter internal child components without creating new blocks. This ensures that a `card` inside a `donation` module behaves differently than a `card` inside a `download` module.

##### Generated HTML

```html
<!-- Module rendered as a Donation box -->
<div class="as-module as-module--donation" id="as-module-101">
    <div class="as-module__box">
        <h2>Support our cause</h2>
        <div class="as-module__item as-module__item--button">
            <button class="btn btn-primary">Donate $10</button>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-module {
  // Anchor offset for sticky headers
  scroll-margin-top: 4rem; 

  &--donation {
    .as-module__box {
       background-color: var(--bs-light);
       text-align: center;
       padding: 1.5rem 0;
    }
  }

  &--pageindex {
    // Hierarchical indentation logic
    .as-module__inset-h4 { margin-left: 1.5rem; }
    .as-module__inset-h5 { margin-left: 2rem; }
  }
}
```
